<template>
  <base-breadcrumb class="fixed-container">
    <a-card>
      <titleName title="成本价格信息名称" />
        <!-- :scroll="{ x: 'max-content' }" -->
      <b-table
        ref="table"
        :columns="columns"
        :request="loadData"
        row-key="id"
        :isShowTotal="false"
        :showPage="false"
        :isShowCountBar="false"
      >
        <template #prefix="data">
          <a-button type="primary" @click="showAddModal('add')" >新增</a-button >
        </template>
        
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        
        <span slot="operation" slot-scope="text, record">
          <a v-btnPermission="'bm_019_loo_04'" @click="showAddModal('edit', record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="del(record)">删除</a>
        </span>
      </b-table>
    </a-card>
    
    <DialogForm
      ref="dialogForm"
      edit-model="E"
      :custom-footer="true"
      :visible.sync="visible"
      :header-title="'成本价格信息名称'"
      :width="650"
      :form="dialogForm"
      :form-list="formList"
      :rules="rules"
      @confirm="formChange">
      
      <template slot="footer">
        <a-button class="mr10p" :disabled="loading.dialogLoading" @click="visible=false"> 取消 </a-button>
        <a-button type="primary" :loading="loading.dialogLoading" @click="handleOk"> 提交 </a-button>
      </template>
    </DialogForm>
    
    <div class="btn_box tool-btns--fixed page-btn-right-top">
      <a-button class="ml12" @click="$close">关闭</a-button>
    </div>
  </base-breadcrumb>
</template>
<script>
import DialogForm from '@/components/DialogForm' // 弹窗
import { costPriceList, costPriceEdit, costPriceDel } from '@/api/businessAffairs/subcostprice'
const columns = [
    // {
    //     title: '序号',
    //     dataIndex: 'sortNum',
    //     width: '80px',
    //     fixed: 'left'
    // },
    {
        title: '名称',
        dataIndex: 'name',
        width: '200px'
    },
    {
        title: '章节说明',
        dataIndex: 'illustrateInfo',
        // width:'40%'
    },
    {
        dataIndex: 'operation',
        width: '120px',
        scopedSlots: { customRender: 'operation' },
    },
]
export default {
  name:'ConstPriceTable',
  components: {
    DialogForm
  },
  data() {
    return {
      columns,
      visible: false,
      dialogForm: {},
      dialogFormType: 'add',
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        illustrateInfo: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      loading: {
        dialogLoading: false
      },
      loadData: (param) => {
        let params = {
          id: this.branchCompanyId
        }
        return costPriceList(params).then((res) => {
          return res
        })
      },
    }
  },
  props: {
  },
  computed: {
    formList() {
      return [
        {
          type: 'a-input',
          keyName: 'name',
          label: '名称',
          span: 22,
        },
        {
          type: 'a-textarea',
          keyName: 'illustrateInfo',
          label: '章节说明',
          span: 22,
        },
      ]
    },
    branchCompanyId() {
      return this.$route.query.branchCompanyId
    },
  },
  watch: {
    isAudit: {
        immediate: true,
        handler(val) {
            // if (val) {
            //     this.$nextTick(() => {
            //         // this.pageType = 'look'
            //     })
            // }
        },
    },
  },
  created() {
  },
  mounted() {
  },
  methods: {
    showAddModal(type, row = {}) {
      this.dialogFormType = type
      if (type =='add') {
        this.dialogForm = {}
        this.$checkRequireItem()
      } else if (type == 'edit') {
        console.log(row)
        this.dialogForm = row
        this.$checkRequireItem()
      } else {
      }
      this.visible = true
    },
    formChange(data) {
      console.log(data)
      let param = {
        branchCompanyId: this.branchCompanyId,
        ...data
      }
      costPriceEdit(param).then((res) => {
        this.loading.dialogLoading = false
        if (res.code == 200 || res.data.code == 200) {
          this.$message.success('添加成功')
          this.visible = false
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.message || res.data.message || '添加失败！')
        }
      }).catch(() => {
        this.visible = false
        this.loading.dialogLoading = false
        this.$message.error('添加失败！')
      })
    },
    handleOk() {
      this.loading.dialogLoading = true
      this.$refs.dialogForm.handleOk()
    },
    handleClose() {
      this.$close()
    },
    del(row) {
      let that = this
      that.$confirm({
          title: '温馨提示',
          content: '确定是否删除数据？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            return costPriceDel({id: row.id}).then((res) => {
              console.log(res)
              if (res.code == 200 || res.data.code == 200) {
                that.$message.success('删除成功')
                that.$refs.table.refresh()
              } else {
                that.$message.error(res.message || res.data.message || res.msg || '删除失败！')
              }
            })
          },
      })
    }
  },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
</style>